<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta charset="UTF-8" />
		<title>CanvasEditor</title>
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
		<link rel="stylesheet" href="/css/editor.css" />
		<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
		<script src="/jquery-tmpl-master/jquery.tmpl.min.js"></script>
		<script src="/js/image_to_photo.js"></script>
		<script src="/js/editor.js"></script>

		<script type="text/javascript" src="/js/jspdf.js"></script>
		<script type="text/javascript" src="/js/jspdf.plugin.standard_fonts_metrics.js"></script>
		<script type="text/javascript" src="/js/jspdf.plugin.split_text_to_size.js"></script>
		<script type="text/javascript" src="/js/jspdf.plugin.from_html.js"></script>

		<script type="text/javascript" src="/js/base64.js"></script>
		<script type="text/javascript" src="/js/canvas2image.js"></script>
		<style type="text/css">
			.sliderLabel{
				margin-left: 30px;
			}
			
			fieldset {
				border: none;
			}
			
			tr:nth-child(even), tr:nth-child(even) tr {
				background: #CCC;
			}
			tr:nth-child(odd), tr:nth-child(odd) tr {
				background: #FFF;
			}
			
			.configImage {
				height: 45px;
			}
			
			.configImage:hover {
				cursor:pointer;
			}
			
			.toolbar{
				width: 815px;
				background-color: rgb(213, 213, 213);
				margin-left:-20px;
				padding-left: 20px;
				margin-top: -10px;
				padding-top: 15px;
				height: 65px;
			}
		</style>
	</head>
	<body>
		<!--div id="test" >
			ok
		</div-->
		<button id="openDialogBtn">
			edit
		</button>
		<div id="workspaceDialog" class="hidden">
			<section class="toolbar">
				<!--button id="openToolboxBtn">
					toolbox
				</button-->
				<img src="/img/options-icon.png" id="openToolboxBtn" class="configImage" alt="Configuratie" title="Configuratie"/>
				<a href="http://www.aha-soft.com" class="hidden" />
				<!--img src="/img/application-icon.png" id="openToolboxBtn" class="configImage" alt="Configuratie" title="Configuratie" />
				<a href="http://awicons.com" class="hidden" /-->
				<!--button id="uploadImageBtn">
					uploadImage
				</button-->
				<img src="/img/folder-my-pictures-icon.png" id="uploadImageBtn" class="configImage" alt="Afbeeldingen beheren" title="Afbeeldingen beheren" />
				<a href="http://www.aha-soft.com" class="hidden" />
				<button id="mergeBtn">
					Maak canvas
				</button>
				<select id="canvasSizeSelector">
					<option tal:repeat="config canvasConfigurations" tal:attributes="value config/url;">${config/name}</option>
				</select>
			</section>
			
			<section id="workspacePlaceholder"/>
			<div id="cmWidth" tal:content="cmWidth" class="hidden"/>			
			<div id="cmHeight" tal:content="cmHeight" class="hidden"/>			
		</div>
		<canvas id="resultingImageHolder" class=""> </canvas>
		
		<div id="workspaceDialogHeight" class="hidden" tal:content="workspaceDialogHeight" />
		<div id="workspaceDialogWidth" class="hidden" tal:content="workspaceDialogWidth" />
		<div id="imageUploadDialogWidth" class="hidden" tal:content="imageUploadDialogWidth" />

		
		<!--img id="imageX" data-src="sourceUrl" width="200" height="200" style="border: none;"/-->

		<script type="text/javascript">
			/*<![CDATA[*/$("#workspacePlaceholder").load("<?php echo $ctx->canvasConfigurations[0]->url; ?>");/*]]>*/
			
			$("#canvasSizeSelector").change(function(){
				$("#workspace img").each(function(){
					$(this).remove();
				});
				
				$("#workspacePlaceholder").load($(this).val());
				$("#uploadImage1Input").val("");
				$("#uploadImage2Input").val("");
				$("#uploadImage3Input").val("");
				$("#uploadImage4Input").val("");
				$("#uploadImage5Input").val("");
				$('.previewImage1').html('<img src="/img/noImage.png" />');
				$('.previewImage2').html('<img src="/img/noImage.png" />');
				$('.previewImage3').html('<img src="/img/noImage.png" />');
				$('.previewImage4').html('<img src="/img/noImage.png" />');
				$('.previewImage5').html('<img src="/img/noImage.png" />');
				initPreviews();
			});
			initPreviews();
			
			$("#mergeBtn").click(function(e) {
				ctx.fillStyle = $("#resultingImageHolder").css("background-color");
				ctx.fillRect(0,0,$("#resultingImageHolder")[0].width, $("#resultingImageHolder")[0].height);
				
				//http://stackoverflow.com/questions/14383557/setting-canvas-todataurl-jpg-quality
				$.when(
				$("#workspace img").each(function() {
					drawImage(ctx, $(this), $("#extendedCanvas"), $("#containerWidthInchHolder").html(),$("#containerHeightInchHolder").html(),$("#scaleHolder").html());//canvasWidthInch, canvasHeightInch
				})
				).then(
					$.ajax({
						type: "POST",
						url: "/create_image_file.php",
						data: { 
						 'imgBase64': canvas.toDataURL("image/jpeg"),
						 'width' : $("#resultingImageHolder")[0].width,
						 'height': $("#resultingImageHolder")[0].height,
						 'scale' : $("#scaleHolder").html(),
						 'dpi_x' : $("#dpi").html(),
						 'dpi_y' : $("#dpi").html(),
						 'containerWidthInch' : $("#containerWidthInchHolder").html(),
						 'containerHeightInch' : $("#containerHeightInchHolder").html()
						}
					}).done(function(o) {
						if(str.search("VIAE_ERROR") != -1){
							document.write(o);
						} 
					})
				);
			});
			
			function initPreview(row, input){
				var id = $(row).find(".id").html();
				$('#workspace #image' + id).remove();
				var scale = $("#scaleHolder").html();
				readURL(input, 'image' + id, '.previewImage' + id);
			}

			function initPreviews(){
				$(".uploadImageInput").each(function(){
					$(this).change(function() {
						var row = $(this).parent().parent();
						initPreview(row, this);
					});
				});
			}

			$("#allowBorder").change(function() {
				if ($(this).is(":checked")) {
					$("#workspace").addClass("allowBorder");
				} else {
					$("#workspace").removeClass("allowBorder");
				}
			});
			$("#keepProportions").change(function() {
				$("#workspace img").each(function() {
					$(this).resizable("destroy");
				});
				init();
			});
			

			//#####################################

			init();

			$('#imageUploadDialog .nav-up').click(function(e) {
				initNavUp($(this));
			});

			$('#imageUploadDialog .nav-down').click(function(e) {
				initNavDown($(this));
			});

		</script>
	</body>
</html>